<template>
  <el-container>
    <el-main style="height: 100%;width: 100%;">
      <el-row :gutter="30" style="height: 100%;width: 100%">
        <el-col :span="6"  style="height: 100%;" >

          <div class="panal">
            <el-row style="height: 50%;width: 100%">
              <el-container>
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                  报表数据来源
                </el-header>
                <el-main >
                  <pieChart style="height: 100%" ref="pieChart"></pieChart>
                </el-main>
              </el-container>
            </el-row>
            <el-row style="height: 50%;width: 100%">
              <el-container>
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500;border-top: 1px solid rgba(7,118,181,.7);">
                  本年度访问量统计分析
                </el-header>
                <el-main >
                  <barLineCharts style="height: 100%" ref="lineChart"></barLineCharts>
                </el-main>
              </el-container>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12"   style="height: 100%;">
          <el-container class="panal">
            <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
              报表预览
            </el-header>
            <el-main>
              <el-row :gutter="40" class="panel-group">
                <el-col v-for="(item,index) in biData" :xs="12" :sm="12" :lg="6" class="card-panel-col" @click.native="tiaozhuan(item)">
                  <div class="card-panel">
                    <el-row :gutter="40">
                      <el-col :span="8">
                        <el-image  style="height: 60px;width: 60px;" :src="item.biIcon"></el-image>
                      </el-col>
                      <el-col :span="16">
                        <div  style="font-size: 16px;height: 70px;line-height: 80px;text-align: center;white-space: normal;width: 100%">{{item.biName}}</div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>

              </el-row>
            </el-main>
            <el-footer style="width: auto;margin-left: auto;margin-right: auto">
<!--              <el-pagination-->
<!--                background-->
<!--                @size-change="handleSizeChange"-->
<!--                @current-change="handleCurrentChange"-->
<!--                :current-page.sync="currentPage"-->
<!--                :page-size="20"-->
<!--                layout="total, prev, pager, next"-->
<!--                :total="total">>-->
<!--              </el-pagination>-->
            </el-footer>

          </el-container>
        </el-col>
        <el-col :span="6" style="height: 100%">
          <div class="panal">
            <el-row style="height: 50%;width: 100%">
              <el-container>
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500">
                  当日访问记录
                </el-header>
                <el-main style="padding: 0;overflow: hidden" >
                  <div style="width: 100%;border: 1px solid #368AB6;font-size: 14px">
                    <el-row :gutter="20" style="text-align: center;color: white;height: 40px;line-height: 40px">
                      <el-col :span="4" style="border-right: 1px solid #368AB6;height: 40px">序号</el-col>
                      <el-col :span="6" style="border-right: 1px solid #368AB6;height: 40px">姓名</el-col>
                      <el-col :span="6" style="border-right: 1px solid #368AB6;height: 40px">部门名称</el-col>
                      <el-col :span="8" style="border-right: 1px solid #368AB6;height: 40px">登录时间</el-col>
                    </el-row>
                  </div>
                  <vue-seamless-scroll :data="logInfo" ref="seamlessScroll1" :class-option="classOption" class="warp1" >
                    <div style="width: 100%;border: 1px solid #368AB6;border-top: none;font-size: 12px" v-for="(item,index) in  logInfo">
                      <el-row :gutter="20" style="text-align: center;color:#D2C172;height: 40px;line-height: 40px">
                        <el-col :span="4" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">{{index+1}}</el-col>
                        <el-col :span="6" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">{{item.realName}}</el-col>
                        <el-col :span="6" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">{{item.deptName}}</el-col>
                        <el-col :span="8" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">{{item.loginTime}}</el-col>
                      </el-row>
                    </div>
                  </vue-seamless-scroll>
                </el-main>
              </el-container>
            </el-row>
            <el-row style="height: 50%;width: 100%;padding: 0;">
              <el-container>
                <el-header style="height: 60px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 60px;font-size: 16px;font-weight: 500;border-top: 1px solid rgba(7,118,181,.7);">
                  登录用户信息
                </el-header>
                <el-main style="overflow: hidden">
                  <div style="width: 100%;border-top: none;font-size: 12px" >
                    <el-row :gutter="20" style="text-align: center;color: #D2C172;height: 40px;line-height: 40px;border: 1px solid  #368AB6">
                      <el-col :span="8" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">用户账号</el-col>
                      <el-col :span="16" style="font-weight: bolder;height: 40px">{{userInfo.userName}}</el-col>
                    </el-row>
                    <el-row :gutter="20" style="text-align: center;color:#D2C172;height: 40px;line-height: 40px;border: 1px solid  #368AB6;border-top: none">
                      <el-col :span="8" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">部门名称</el-col>
                      <el-col :span="16" style="font-weight: bolder;height: 40px">{{userInfo.deptName}}</el-col>
                    </el-row>
                    <el-row :gutter="20" style="text-align: center;color: #D2C172;height: 40px;line-height: 40px;border: 1px solid  #368AB6;border-top: none">
                      <el-col :span="8" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">姓名</el-col>
                      <el-col :span="16" style="font-weight: bolder;height: 40px">{{userInfo.nickName}}</el-col>
                    </el-row>
                    <el-row :gutter="20" style="text-align: center;color: #D2C172;height: 40px;line-height: 40px;border: 1px solid  #368AB6;border-top: none">
                      <el-col :span="8" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">手机号码</el-col>
                      <el-col :span="16" style="font-weight: bolder;height: 40px">{{userInfo.phone}}</el-col>
                    </el-row>
                    <el-row :gutter="20" style="text-align: center;color: #D2C172;height: 40px;line-height: 40px;border: 1px solid  #368AB6;border-top: none">
                      <el-col :span="8" style="border-right: 1px solid #368AB6;font-weight: bolder;height: 40px">角色</el-col>
                      <el-col :span="16" style="font-weight: bolder;height: 40px">{{userInfo.roleNames}}</el-col>
                    </el-row>
                    <div style="width: 140px;height: 80px;margin-left: auto;margin-right: auto;margin-top: 20px">
                      <el-button style="background-color:#061431; border: 1px solid #1A6288 "   @click="logOut" type="primary">退出登录</el-button>
                    </div>
                  </div>
                </el-main>
              </el-container>
            </el-row>

          </div>
        </el-col>
      </el-row>
    </el-main>

  </el-container>
</template>
<script>
  import { parseTime } from '../../utils/entfrm'
  import * as echarts from 'echarts';
  import pieChart from '../dashboard/BiPieChart'
  import lineChart from '../dashboard/BiLineChart'
  import barLineCharts from '../dashboard/BiBarLineCharts'
  import { listBiInfo,listLogin } from "@/api/biInfo/biInfo";

  import { getProfile } from "@/api/system/user";
  import 'echarts-liquidfill';
  import baseInfo from '../sysOverView/processManage/baseInfo'

  export default {
    name: 'index',
    components: {
      pieChart,
      lineChart,
      barLineCharts
    },
    data() {
      return {
        total: 0,
        currentPage:1,
        classOption: {
          step: 0.5,
          singleHeight: 30,
          limitMoveNum:8,
          openWatch: true,
        },
        currentTime:"",
        intervalId3:"",
        logInfo:[],
        userInfo:{},
        queryParams:{
          current: 1,
          size: 10,
        },
        title:"民祥科技BI报表系统",
        biData:[],
      }
    },
    methods:{
      formatTime(date) {
        return parseTime( new Date().getTime() ,'{y}-{m}-{d} ')+ date.toLocaleTimeString();
      },
      updateTime() {
        this.currentTime = this.formatTime(new Date());
      },
      tiaozhuan(data){
        this.$router.push(data.biUrl+"?biName="+data.biName);
      },
      firstPage(){
        this.$router.push("/birRepport?biName=BI系统首页");
      },
      logOut(){
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            window.close();
          })
        })
      },


      lineChart(){
          // let  chartData={
          //   series:[{
          //     name: '文件分享统计',
          //     type: 'bar',
          //     barWidth:'20%',
          //     data: [],
          //   },
          //     {
          //       name: '文件分享统计',
          //       type: 'line',
          //       data: [],
          //     }],
          //   xData:['1','2']
          // };
          //   chartData.series[0].data=[1,2];
          //   chartData.series[1].data=[1,2];
          //
          // this.$refs.lineChart.setOption(chartData);
      },
      getBiInfo(){
        listBiInfo(this.queryParams).then(response => {
          this.biData=response.data;
          this.total = response.total;
        })
      },
      getLoginInfo(){
        listLogin(this.queryParams).then(response => {
         this.logInfo=response.data;
          this.total = response.total;
        })
      },
      dataSource(){
        listBiInfo(this.queryParams).then(response => {
          let  chartData={
            series:[{
              name:'数据来源图',
              type: 'pie',
              radius: [60, 95],
              center: ['50%', '38%'],
              data:[]

            }],
            lengendData:["智能仓储","智慧物流","电子采购平台","DCS控制系统",'化验系统'],
            legShow:false
          };
          chartData.series[0].data=[{
            name:"智能仓储",
            value:15
          },
            {
              name:"智慧物流",
              value:15
            },
            {
              name:"电子采购平台",
              value:15
            },
            {
              name:"DCS控制系统",
              value:15
            },
            {
              name:"化验系统",
              value:15
            }
          ];
          this.$refs.pieChart.setData(chartData);
        })

      },
      getUser() {
        debugger;
        getProfile().then(response => {
          this.userInfo = response.data;
        });

      }
//     shuijingtu(){
//       const chart = echarts.init(document.getElementById('chart-container'));
//
//       var dataList = [
//         { name: '系列一', value: 73, max: 100 },
//         { name: '系列二', value: 18, max: 100 },
//         { name: '系列三', value: 43, max: 100 },
//         { name: '系列四', value: 28, max: 100 },
//       ];
//       var colorList1 = ['rgba(38, 138, 255, 0.9)', 'rgba(30, 214, 255, 0.9)', 'rgba(61, 255, 220, 0.9)', 'rgba(54, 240, 151, 0.9)']
//       var colorList2 = ['#1A60B1', '#1691B3', '#2AAB9C', '#25A270']
//       var colorList3 = ['#268AFF', '#1ED6FF', '#3DFFDC', '#36F097']
//       var colorList4 = ['rgba(38, 138, 255, 0.2)', 'rgba(30, 214, 255, 0.2)', 'rgba(61, 255, 220, 0.2)', 'rgba(54, 240, 151, 0.2)']
//
//
// // 头部数据
//       let topData = dataList.map((item, index) => {
//         return {
//           name: '',
//           value: item.max,
//           symbolPosition: 'end',
//           itemStyle: {
//             color: colorList1[index]
//           },
//         };
//       });
// // 底部立体柱子
//       let bottomBar = dataList.map((item, index) => {
//         return {
//           value: item.value,
//           itemStyle: {
//             normal: {
//               color: {
//                 x: 0,
//                 y: 0,
//                 x2: 0,
//                 y2: 1,
//                 type: 'linear',
//                 global: false,
//                 // color:colorList2[index]
//                 colorStops: [
//                   {
//                     //第一节下面
//                     offset: 0,
//                     color: colorList2[index]
//                   },
//                   {
//                     offset: 1,
//                     color: colorList2[index]
//                   }
//                 ]
//               }
//             }
//           }
//
//         };
//       });
// // 底下圆片
//       let bottomCircle = dataList.map((item, index) => {
//         return {
//           name: '', value: item.max,
//           itemStyle: {
//             color: colorList3[index]
//           },
//         };
//       });
// // 中间圆片
//       let middleCircle = dataList.map((item, index) => {
//         return {
//           name: '', value: item.value, symbolPosition: 'end',
//           itemStyle: {
//             color: colorList3[index]
//           },
//         };
//       });
// // 上边的柱子
//       let upBar = dataList.map((item, index) => {
//         return {
//           name: item.name, value: item.max - item.value,
//           itemStyle: {
//             color: colorList4[index]
//           }
//         };
//       });
//
//      let option = {
//         backgroundColor: '#333333',
//         tooltip: {
//           trigger: 'item',
//           backgroundColor: 'rgba(0,0,0,0.5)',
//           borderColor: 'rgba(89,211,255,1)',
//           borderWidth: 2,
//           padding: 5,
//           textStyle: {
//             color: 'rgba(89,211,255,1)',
//             fontSize: 18,
//             width: 300,
//             height: 40
//           },
//           formatter: '{c}' + '%',
//           extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
//           // 自定义的 CSS 样式
//         },
//         grid: {
//           bottom: '10%',
//           top: '35%',
//           right: '0%',
//           left: '0%'
//         },
//         xAxis: {
//           data: ['系列一', '系列二', '系列三', '系列四', '系列五'],
//           axisTick: {
//             show: false
//           },
//           axisLine: {
//             show: false
//           },
//           axisLabel: {
//             show: true,
//             textStyle: {
//               color: 'rgba(255,255,255,0.5)'
//             },
//             margin: 30 //刻度标签与轴线之间的距离。
//           }
//         },
//         yAxis: {
//           splitLine: {
//             show: false
//           },
//           axisTick: {
//             show: false
//           },
//           axisLine: {
//             show: false
//           },
//           axisLabel: {
//             show: false
//           }
//         },
//         series: [
//           // 头
//           {
//             name: '',
//             type: 'pictorialBar',
//             symbolSize: [120, 45],
//             symbolOffset: [0, -20],
//             z: 12,
//             data: topData
//           },
//           //底部立体柱
//           {
//             stack: '1',
//             type: 'bar',
//             silent: true,
//             barWidth: 120,
//             data: bottomBar,
//
//           },
//           //最底下的圆片
//           {
//             name: '',
//             type: 'pictorialBar',
//             symbolSize: [120, 30],
//             symbolOffset: [0, 16],
//             z: 12,
//
//             data: bottomCircle
//           },
//           // 中间圆片
//           {
//             name: '',
//             type: 'pictorialBar',
//             symbolSize: [120, 42],
//             symbolOffset: [0, -20],
//
//             z: 12,
//             data: middleCircle
//           },
//           //上部立体柱
//           {
//             //上部立体柱
//             stack: '1',
//             type: 'bar',
//             label: {
//               show: true,
//               position: 'top', //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
//               distance: 30,
//               color: 'rgba(255,255,255,0.5)',
//               fontSize: 20,
//               formatter: function (item) {
//                 var a = 100;
//                 return a - item.value + '%';
//               }
//             },
//             silent: true,
//             barWidth: 120,
//             //barGap: '-100%', // Make series be overlap
//             data: upBar,
//             z: 10,
//           }
//         ]
//       };
// // 设置配置项并渲染图表
//       chart.setOption(option);
//     }
    },
    mounted() {
      this.getBiInfo();
      this.dataSource();
      this.lineChart();
      this.getUser();
      this.getLoginInfo();
    },
  }
</script>

<style >












</style>
